<template>
  <el-container style="height: 640px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu @select="handleSelect">
        <el-submenu v-for="(dept,index) in depts" :index="index+1">
          <template slot="title"><i class="el-icon-message"></i>{{dept.deptName}}</template>
          <el-menu-item-group>
            <el-menu-item v-for="(emp,index) in dept.emps" :index="emp">{{emp.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>


    <el-main>
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="收件人">
          <el-input v-model="formLabelAlign.name" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="formLabelAlign.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            type="textarea"
            :rows="18"
            placeholder="请输入内容"
            v-model="formLabelAlign.content">
          </el-input>
        </el-form-item>
      </el-form>

      <el-row>
        <el-col :span="22">
          <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple-light">
            <el-button align="right" type="primary" plain @click="submit">提交</el-button>
          </div>
        </el-col>
      </el-row>


    </el-main>
  </el-container>
</template>

<script>
  import axios from "axios"

  export default {
    name: "MessageList",
    data() {
      return {
        depts: [],
        labelPosition: 'right',
        formLabelAlign: {
          name: [],
          id: [],
          title: '',
          content: ''
        }
      };
    },
    mounted() {
      axios.get(this.apiUrl + "/dept/msgList").then(r => {
        if (r.data.code == "200") {
          console.log(r)
          this.depts = r.data.data
        }
      })
    },
    methods: {
      handleSelect(key, keyPath) {
        if (this.formLabelAlign.id.indexOf(key.id) == -1) {
          this.formLabelAlign.name.push(key.name);
          this.formLabelAlign.id.push(key.id);
        }
      },
      submit() {
        let that=this;
        axios({
          url: this.apiUrl + "/message/add",
          method: "post",
          data: JSON.stringify({
            "empid": sessionStorage.getItem("empid"),
            "ids": this.formLabelAlign.id,
            "title": this.formLabelAlign.title,
            "content": this.formLabelAlign.content,
          }),
          headers: {"Content-Type": "application/json"}
        }).then(function (r) {
            console.log(r)
            if (r.data.code == "200") {
              that.formLabelAlign.id = '',
                that.formLabelAlign.title = '',
                that.formLabelAlign.content = '',
                that.formLabelAlign.name=''
              alert("发送成功")
            }
          }
        )
        ;
      }
    }
  }
</script>

<style scoped>
  el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
